<template>
  <div class="staffDetail">
    <van-nav-bar title="家政平台" left-arrow @click-left="$router.back()" />
    <div class="main">
      <van-card :thumb="staffList.pic">
        <template #title>
          <div class="title_q">
            <span>{{ staffList.name }}</span>
            <button
              style="float: right"
              v-if="staffList.allow === 0"
              @click="cutAttention"
            >
              关注
            </button>
            <button
              style="float: right; background-color: #f8f8f8; color: #000"
              v-else
              @click="cutAttention"
            >
              已关注
            </button>
          </div>
        </template>
        <template #tags>
          <van-tag plain type="danger">保姆</van-tag>
        </template>
        <template #price>
          <div>
            <p>
              <span v-for="(item, index) in staffList.detail" :key="index">
                {{ item }} |
              </span>
              <!-- {{ staffList.detail[0] }} | {{ staffList.detail[1] }} |
              {{ staffList.detail[2] }} | {{ staffList.detail[3] }} -->
            </p>
          </div>
        </template>
      </van-card>
      <div class="foo">
        <p>注册公司：{{ staffList.company }}</p>
        <p>
          职业：<span v-for="(item, index) in staffList.prof" :key="index">
            {{ item }}
          </span>
          <!-- 职业：{{ staffList.prof[0] }} {{ staffList.prof[1] }}
          {{ staffList.prof[2] }} {{ staffList.prof[3] }} -->
        </p>
        <div>
          <span><van-icon name="medal" size="20" /> 身份信息已核实</span>
          <div>
            <button>电话联系</button>
            <button>微信联系</button>
          </div>
        </div>
      </div>
    </div>
    <div class="introduce">
      <div class="skill">
        <div class="bar">
          <span>主要技能</span>
        </div>
        <div class="btn">
          <button v-for="(item, index) in staffList.skill" :key="index">
            {{ item }}
          </button>
        </div>
      </div>
      <div class="intro">
        <van-collapse v-model="activeNames">
          <van-collapse-item name="1">
            <template #title>
              <div class="bar">
                <span>个人简介</span>
              </div>
            </template>
            <template #default>
              <div>
                {{ staffList.resume }}
              </div>
            </template>
          </van-collapse-item>
        </van-collapse>
      </div>
      <div class="message">
        <van-collapse v-model="active">
          <van-collapse-item name="1">
            <template #title>
              <div class="bar">
                <span>个人信息</span>
              </div>
            </template>
            <template #default>
              <div>
                <p>任职公司：{{ staffList.company }}</p>
                <p>籍贯民族：汉</p>
                <p>生肖属性：密</p>
                <p>星座：密</p>
                <p>出生日期：{{ staffList.birthday }}</p>
                <p>学历：{{ staffList.education }}</p>
              </div>
            </template>
          </van-collapse-item>
        </van-collapse>
      </div>
      <div class="pepers">
        <div class="cont">
          <div class="bars"><span>荣誉证书</span></div>
          <van-grid :border="false" :column-num="3">
            <van-grid-item :gutter="10">
              <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
            </van-grid-item>
          </van-grid>
        </div>
        <div class="cont">
          <div class="bars"><span>证件信息</span></div>
          <van-grid :border="false" :column-num="3">
            <van-grid-item :gutter="10">
              <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
            </van-grid-item>
          </van-grid>
        </div>
      </div>
    </div>
    <!-- 底部导航 -->
    <div class="details-footer">
      <van-tabbar
        :fixed="false"
        active-color="#979191"
        inactive-color="#979191"
      >
        <van-tabbar-item icon="chat" @click="showPop = true"
          >评价</van-tabbar-item
        >
        <van-tabbar-item icon="share" @click="showShare = true"
          >分享</van-tabbar-item
        >
        <van-tabbar-item icon="wechat" @click="showQrCode"
          >微信二维码</van-tabbar-item
        >
        <van-tabbar-item icon="phone" @click="showPhone = true"
          >电话</van-tabbar-item
        >
      </van-tabbar>
    </div>
    <!-- 评价弹窗 -->
    <van-popup
      class="evaluate"
      v-model="showPop"
      closeable
      close-icon-position="top-left"
      position="bottom"
      :style="{ height: '20%' }"
    >
      <van-field
        rows="2"
        autosize
        label="评价 :"
        type="textarea"
        maxlength="50"
        placeholder="请输入评价"
        show-word-limit
      />
    </van-popup>
    <!-- 分享弹窗 -->
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
    />
    <!-- 二维码弹窗层-->
    <van-dialog
      v-model="showDialog"
      title="请扫描二维码"
      show-cancel-button
      :showCancelButton="false"
    >
      <span ref="qrCodejs"></span>
    </van-dialog>
    <!-- 联系电话弹窗 -->
    <van-popup
      class="phone"
      v-model="showPhone"
      round
      position="bottom"
      :style="{ height: '8%' }"
    >
      <div>13961111111</div>
    </van-popup>
  </div>
</template>

<script>
import { StaffDetail, alterAttention } from '@/api/staff'
import QRCode from 'qrcodejs2'
export default {
  name: 'staffDetail',
  props: ['id'],
  data() {
    return {
      activeNames: ['1'],
      active: ['1'],
      staffList: {},
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ],
      showShare: false,
      showDialog: false,
      showPhone: false,
      showPop: false,
      Qrcode:null
    }
  },
  created() {
    this.getstaffDetail()
    // document.documentElement.scrollTop = 0
  },
  methods: {
    async getstaffDetail() {
      const { data } = await StaffDetail(this.id)
      // console.log(data)
      this.staffList = data
    },
    // 关注功能
    cutAttention() {
      if (this.staffList.allow) {
        this.staffList = { ...this.staffList, allow: 0 }
      } else {
        this.staffList = { ...this.staffList, allow: 1 }
      }
      alterAttention({ ...this.staffList })
    },
    showQrCode() {
      this.showDialog = true
      // 二维码生成是异步的
      if(this.QRCode)  return
      this.QRCode=this.$nextTick(() => {
        new QRCode(this.$refs.qrCodejs, {
          text: '嗨嗨嗨，闲着没事做个汉堡',
          width: 150,
          height: 150,
          colorDark: 'black',
          clolrLiight: 'white',
        })
      })
    },
  },
}
</script>

<style scoped lang="less">
.staffDetail {
  background-color: #f8f8f8;
  /deep/.van-nav-bar__content {
    height: 150px;
    width: 100%;
    background-color: #3f51b5;
    padding-bottom: 54px;
    .van-nav-bar__left {
      height: 126px;
      margin-top: 10px;
      font-size: 35px;
      .van-nav-bar__arrow {
        color: #fff;
        font-size: 40px;
      }
    }
    .van-nav-bar__title {
      margin-left: 80px;
      margin-bottom: 8px;
      color: #fff;
      font-size: 32px;
    }
  }
  .main {
    height: 450px;
    margin: -50px 32px 30px;
    border-radius: 10px;
    background-color: #fff;
    .van-card {
      border-radius: 10px;
      z-index: 1;
      background-color: #fff;
      padding-bottom: 0;
      .title_q {
        /deep/span {
          font-size: 26px;
          font-weight: 600;
        }
        button {
          width: 126px;
          height: 50px;
          font-size: 14px;
          color: #fff;
          background-color: #3f51b5;
          border: 0;
          font-weight: 600;
          border-radius: 25px;
        }
      }
      .van-tag--plain {
        display: inline-block;
        color: #3f51b5;
        font-size: 20px;
        font-weight: 600;
        margin-top: 20px;
        margin-bottom: 20px;
        width: 160px;
        height: 46px;
        border-radius: 23px;
        border: 1px solid #3f51b5;
        text-align: center;
        line-height: 50px;
      }
      .van-card__price {
        p {
          font-size: 17px;
          color: #979191;
          font-weight: 600;
        }
      }
    }
    .foo {
      margin-left: 30px;
      p {
        font-size: 17px;
        color: #979191;
        font-weight: 600;
        margin-top: 0;
      }
      div {
        font-size: 17px;
        font-weight: 600;
        span {
          margin-top: 30px;
          float: left;
          font-size: 28px;
          .van-icon {
            color: #3f51b5;
            vertical-align: middle;
          }
        }
        div {
          display: flex;
          flex-direction: column;
          justify-content: center;
          float: right;
          margin-right: 20px;
          button {
            width: 140px;
            height: 50px;
            font-size: 14px;
            background-color: #fff;
            color: #3f51b5;
            border: 2px solid #3f51b5;
            font-weight: 600;
            border-radius: 25px;
            margin-bottom: 20px;
          }
        }
      }
    }
  }
  .introduce {
    background-color: #fff;
    margin: 0 32px 30px;
    border-radius: 10px;
    .skill {
      .btn {
        margin-left: 40px;
        button {
          padding: 0 10px;
          font-size: 15px;
          margin-right: 30px;
        }
      }
    }
    .intro {
      /deep/.van-cell {
        padding-bottom: 0;
      }
      /deep/.van-cell::after {
        border-width: 0;
      }
      .van-cell--clickable {
        .van-cell__title {
          .bar {
            margin-left: -30px;
            margin-top: -20px;
            height: 30px;
          }
          .van-cell::after {
            border-bottom: 0;
          }
        }
      }
      /deep/.van-hairline--top-bottom::after {
        border-width: 0;
      }
    }
    .message {
      /deep/.van-cell {
        padding-top: 0;
        padding-bottom: 0;
        .bar {
          margin-left: -30px;
          margin-top: -20px;
        }
      }
      /deep/.van-collapse-item {
        .van-collapse-item__content {
          p {
            margin-top: 0;
            margin-bottom: 0;
          }
        }
      }
      /deep/.van-hairline--top-bottom::after {
        border-width: 0;
      }
      /deep/.van-cell::after {
        border-bottom: 0;
      }
    }
    .bar {
      position: relative;
      height: 80px;
      line-height: 106px;
      font-size: 22px;
      font-weight: 600;
      padding: 0 0 0 50px;
      span::before {
        content: '';
        position: absolute;
        left: 25px;
        top: 38px;
        width: 6px;
        height: 25px;
        background-color: #3f51b5;
      }
    }
    .pepers {
      .cont {
        width: 100%;
        .bars {
          position: relative;
          height: 80px;
          line-height: 105px;
          font-size: 22px;
          font-weight: 600;
          padding: 0 0 0 50px;
          span::before {
            content: '';
            position: absolute;
            left: 25px;
            top: 38px;
            width: 6px;
            height: 25px;
            background-color: #3f51b5;
          }
        }
      }
    }
  }
  button {
    width: 140px;
    height: 50px;
    font-size: 14px;
    background-color: #fff;
    color: #3f51b5;
    border: 2px solid #3f51b5;
    font-weight: 600;
    border-radius: 25px;
    margin-bottom: 20px;
  }
  .evaluate {
    .van-cell {
      margin-top: 70px;
    }
  }
  .van-dialog {
    /deep/.van-dialog__content {
      padding: 20px 0 20px 180px;
    }
  }

  /deep/.van-popup--bottom {
    padding-top: 30px;
    text-align: center;
    color: rgb(0, 110, 255);
    font-size: 60px;
  }
}
</style>
